<script setup>
	import person from "../components/PersonalInformation.vue"
</script>

<template>
	<div id="zhuye">
		<person></person>
		<div style=" width: 100%; display: flex;
		flex-direction:column;">
			<div id="base_ifo" class="ifo">
				<h5 style="display:inline;border-bottom:2px solid var(--van-tabs-bottom-bar-color)">
					基本信息</h5>
				<div class="content">
					<!-- 个人信息的内容 -->
					<div id="QQ" style="width:130px;">
						QQ:2639164XXX
					</div>
					<div id="Tele" style="width:130px;">
						电话:191****0287
					</div>
					<div id="Grade" style="width:130px;">
						年级:2023届
					</div>
					<div id="Direc" style="width:130px;">
						意向:前后端开发
					</div>
				</div>
			</div>
			<div id="honor" class="ifo">
				<h5 style="display:inline;border-bottom:2px solid var(--van-tabs-bottom-bar-color)">
					获得荣誉</h5>
				<div class="content van-multi-ellipsis--l2" id="honorCon">
					1.XXX大赛XXX奖;2.XXX大赛XXX奖;3.XXX大赛XXX奖
				</div>
			</div>
			<div id="skill" class="ifo">
				<h5 style="display:inline;border-bottom:2px solid var(--van-tabs-bottom-bar-color)">
					专业技能</h5>
				<div class="content van-multi-ellipsis--l2" id="skillCon">
					1.爬虫；2.前端；3.数据库基础操作
				</div>
			</div>
		</div>
		<van-button round type="primary" color="linear-gradient(to left, #7CC4ED, #1E9EE4)">收起</van-button>
	</div>
</template>

<style scoped>
	#app {
		text-align: left;
		color: black;
	}

	#app {
		width: 100%;
	}

	.ifo {
		width: 83%;
		height: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 2, 2, 2, 2;
	}

	.content {
		max-width: 270px;
		max-height: 90px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		font-size: small;
		margin-top: 2px;
		margin-bottom: 2px;
	}

	h5 {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.van-button {
		position: fixed;
		box-shadow: var(--main-shadow);
		width: 90%;
		bottom: 10px;
	}

	#zhuye {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
